<!--
 * @Description: 反应速度测试工具
 * @Author: ZhangHan
 * @Date: 2025-08-29 16:22:26
 * @LastEditTime: 2025-08-29 17:27:45
 * @LastEditors: ZhangHan
-->
<template>
  <view class="speed">
    <view
      class="square"
      :style="{ backgroundColor: speedFlag ? 'red' : '#ffffff' }"
    >
      <uni-icons
        v-if="showLoadingCircle"
        type="spinner-cycle"
        class="icon"
        size="24"
      ></uni-icons>
    </view>
    <view class="btn" @click="handleBtnClick">{{ getBtnText }}</view>
    <view class="tips"
      >提示：点击"开始"后，注意方格的颜色变化，一旦由白色变为其他颜色，就点"停止"，即能测试你的反应时间。</view
    >
    <view v-if="errorText" class="errorText">{{ errorText }}</view>
    <view class="result" v-if="resultTime">{{ getResultText }}</view>
    <uni-table border stripe style="margin-top: 32rpx;">
      <uni-tr>
        <uni-th align="center">参考标准</uni-th>
        <uni-th align="center">结果</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in list" :key="index">
        <uni-td align="center">{{ item.text }}</uni-td>
        <uni-td align="center">
          {{ item.desc }}
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const loadingFlag = ref(false);
const speedFlag = ref(false);
const timeData = ref(); //时间戳
const endData = ref(); //结束时间戳
const resultTime = ref(); //结果时间
const showLoadingCircle = ref(false);
const errorText = ref();
const Timer = ref<any>(null);

function getRandomNumber(): number {
  return Math.floor(Math.random() * 7) + 1;
}

const getBtnText = computed(() => {
  return loadingFlag.value ? "停止" : "开始";
});

const getResultText = computed(() => {
  if (resultTime.value) {
    return "你的反应速度为：" + resultTime.value + "毫秒";
  } else {
    return "";
  }
});

//判断列表
const list = [
  {
    time: 100,
    text: "小于等于100毫秒",
    desc: "职业选手",
  },
  {
    time: 200,
    text: "101-200毫秒",
    desc: "很不错啦",
  },
  {
    time: 400,
    text: "201-400毫秒",
    desc: "正常水准",
  },
  {
    time: 400,
    text: "400毫秒以上",
    desc: "有待练习",
  },
];

//按钮点击事件
const handleBtnClick = () => {
  errorText.value = undefined;
  //停止

  if (loadingFlag.value) {
    if (!speedFlag.value) {
      //红色背景没出来之前点击报错
      errorText.value = "可别作弊哦，颜色还没有开始变呢,请重新开始！";
      loadingFlag.value = false;
      showLoadingCircle.value = false;
      clearTimeout(Timer.value);
      Timer.value = null;
      return;
    } else {
      endData.value = new Date().getTime();
      resultTime.value = endData.value - timeData.value;
      endData.value = undefined;
      timeData.value = undefined;
      speedFlag.value = false;
      loadingFlag.value = false;
      clearTimeout(Timer.value);
      Timer.value = null;
    }
  } else {
    console.log("执行开始");

    //开始
    loadingFlag.value = true;
    showLoadingCircle.value = true;
    Timer.value = setTimeout(() => {
      speedFlag.value = true;
      //开始计时
      timeData.value = new Date().getTime();
      showLoadingCircle.value = false;
    }, 1000 * getRandomNumber());
  }
};
</script>

<style lang="scss" scoped>
.speed {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  box-sizing: border-box;
  padding-top: 32rpx;
}

.square {
  width: 250rpx;
  height: 250rpx;
  box-sizing: border-box;
  border: 1rpx solid #333333;
  background: white;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  width: 120rpx;
  height: 80rpx;
  background: #41b883;
  color: #ffffff;
  border-radius: 10rpx;
  box-sizing: border-box;
  margin: 32rpx auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.errorText {
  width: 98%;
  margin: 0 auto;
  height: auto;
  box-sizing: border-box;
  padding: 20rpx 0;
  color: #a94442;
  border: 1rpx solid #a94442;
  background: #f2dede;
  border-radius: 20rpx;
  font-size: 24rpx;
  text-align: center;
}

.tips {
  width: 95%;
  margin: 32rpx auto;
}

.result{
    text-align: center;
    color: #41b883;
    margin-bottom: 32rpx;
}
</style>
